@mixin setLinkBasic($c: $tl-border-1px-color) {
    width: 200%;
    height: 200%;
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
    box-sizing: border-box;
    color: $c;
    border: 0 solid $c;
}

@mixin setTopLine($c: $tl-border-1px-color) {
    @include setLinkBasic($c);
    border-top-width: 1px;
}

@mixin setBottomLine($c: $tl-border-1px-color) {
    @include setLinkBasic($c);
    border-bottom-width: 1px;
}

@mixin setLeftLine($c: $tl-border-1px-color) {
    @include setLinkBasic($c);
    border-left-width: 1px;
}

@mixin setRightLine($c: $tl-border-1px-color) {
    @include setLinkBasic($c);
    border-right-width: 1px;
}

@mixin setLine($name,$c: $tl-border-1px-color) {
    @include setLinkBasic($c);
    border-width: 1px;
    @if $name {
        border-#{$name}-width: 0;
    }
}

@mixin afterBorder($name:b) {
    position: relative;
    @if $name == b {
        &:after {
            @include setBottomLine()
        }
    } @else if $name == t {
        &:before {
            @include setTopLine()
        }
    } @else if $name == l {
        &:before {
            @include setLeftLine()
        }
    } @else if $name == r {
        &:after {
            @include setRightLine()
        }
    } @else if $name == nb {
        &:after {
            @include setLine(bottom);
        }
    } @else if $name == nr {
        &:after {
            @include setLine(right);
        }
    } @else if $name == nl {
        &:after {
            @include setLine(left);
        }
    } @else if $name == nt {
        &:after {
            @include setLine(top);
        }
    } @else {
        &:after {
            @include setLine();
        }
    }
}

.tl-cell-group {

}

.tl-cell {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 0 16*2upx;
    overflow: hidden;
    color: #323233;
    font-size: 14*2upx;
    line-height: 24*2upx;
    background-color: #fff;

    > view:not(.action) {
        padding: 10*2upx 0;
    }

    &.block {
        display: block;
    }

    &:not(:last-child) {
        @include afterBorder(b);
    }

    &.no-border::after {
        border: none;
    }

    &.border-b {
        @include afterBorder(b);
    }

    &.short-border:not(:last-child)::after {
        left: 15*2upx;
    }

    .tl-cell__title, .tl-cell__value {
        flex: 1;
    }

    .tl-cell__value {
        position: relative;
        overflow: hidden;
        color: #969799;
        text-align: right;
        vertical-align: middle;
    }

    .tl-cell--large .tl-cell__label {
        font-size: 14*2upx;
    }

    .tl-cell__label {
        margin-top: 3*2upx;
        color: #969799;
        font-size: 12*2upx;
        line-height: 18*2upx;
    }
}

.tl-cell__card {
    .tl-cell__avatar {
        width: 40*2upx;
        margin-right: 15*2upx;

        &.round {
            height: 40*2upx;
            border-radius: 100%;
            overflow: hidden;
        }
    }

    .tl-cell__content {
        flex: 1;
    }
}

.tl-table {
    .tl-tr {
        &:not(:last-child) {
            position: relative;
            @include afterBorder(b);
        }

        .tl-tb, .tl-th {
            padding: 10*2upx 0;

            &:not(:last-child) {
                @include afterBorder(r);
            }
        }
    }
}

.tl-goods-action {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #fff;

    &-icon {
        flex: 1;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        min-width: 48*2upx;
        height: 50*2upx;
        color: #2F2F2F;
        font-size: 10*2upx;
        line-height: 1;
        text-align: center;
        background-color: #fff;

        &__icon {
            width: 1em;
            color: #323233;
            margin: 0 auto 5*2upx;
            font-size: 18*2upx;
        }
    }

    &-button--warning {
        background: linear-gradient(to right, #ffd01e, #ff8917);
        color: #fff;
    }

    &-button--red {
        background: linear-gradient(315deg, #FF5E00 0%, #FF1A1A 100%);
        color: #fff;
    }

    &-button--dis {
        background: linear-gradient(315deg, #FF5E00 0%, #FF1A1A 100%);
        color: #fff;
    }

    &-button {
        position: relative;
        display: inline-flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        box-sizing: border-box;
        text-decoration: none;
        overflow: visible;
        margin-right: inherit;
        margin-left: inherit;
        transform: translate(0, 0);
        height: 50*2upx;
        line-height: 1;
        padding: 0;
        font-weight: 500;
        font-size: 14*2upx;
        border: none;
        border-radius: 0;
        width: 216*2upx;

        &:after {
            border: none;
            border-radius: 0;
        }
    }

    button[disabled] {
        background: none;
        background-color: #999999;
        color: #fff;
        border: none;
    }

    &-button--first {
        margin-left: 5*2upx;
        border-radius: 100%;
    }
}

.tl-modal {
    &-cancel {
        color: $tl-button-color-cancel;
    }

    &-confirm {
        color: $tl-button-color-confirm;
    }

    &-title {
        color: $tl-text-color;
    }

    &-content {
        height: 358*2upx;

        .tl-modal-parent {
            width: 125*2upx;
            min-height: 100%;
            background: #fff;

            .tl-modal-parent-item {
                height: 40*2upx;
                line-height: 40*2upx;

                &.active {
                    background: #F8F8F8;
                }
            }
        }

        .tl-modal-child {
            padding: 9*2upx 9*2upx 9*2upx 0;

            .tl-modal-child-item {
                width: calc(50% - 18upx);
                height: 40*2upx;
                line-height: 40*2upx;
                background: #fff;
                margin-left: 9*2upx;
                margin-bottom: 9*2upx;
                border-radius: 4*2upx;

                &.active {
                    border: 1px solid $tl-color-primary;
                    color: $tl-color-primary;
                }
            }
        }
    }
}

//#ifdef H5
$tl-radio-size: 24;
//#endif
//#ifdef MP-WEIXIN
$tl-radio-size: 26;
//#endif

radio {
    @for $i from 16 through 26 {
        &.tl-radio-#{$i} {
            transform: scale($i / $tl-radio-size);
        }
    }
}

checkbox {
    @for $i from 16 through 26 {
        &.tl-checkbox-#{$i} {
            transform: scale($i / $tl-radio-size);
        }
    }
}

.no-padding {
    padding: 0;
}
